import { ProfileOutlined, FolderOpenOutlined, FileImageOutlined } from '@ant-design/icons'
import { Tooltip } from 'antd'
import c from 'classnames'
import { ReactComponent as MpIcon } from '@/desktop/assets/mini-program.svg'
import { ReactComponent as VideonumIcon } from '@/desktop/assets/videonum.svg'
import { Actionable } from '@/desktop/components'
import { ManageMiniprograms } from '@/desktop/components/ManageMiniprograms'
import { ManageVideonums } from '@/desktop/components/ManageVideonums'
import { useChatSidebars } from '@/desktop/views/chat-sidebars'
import services from '@/services'
import { ChatRecordType } from '@/services/contact-chat'
import { type SavedMiniProgram } from '@/services/resources/mini-programs'
import { type SavedVideonum } from '@/services/resources/videonums'
import PullInGroup from './pull-in-group'
import SendEmotion from './send-emotion'
import Transfer from './transfer'
import './index.module.less'

export default function Toolbar(props: {
  insertText: (text: string) => void
  sendFiles: (files: File[], autoStart?: boolean, recordType?: ChatRecordType) => void
}) {
  const { insertText, sendFiles } = props
  const { switchShow: switchShowSidebar, showingSidebar } = useChatSidebars()

  return <div styleName="toolbar">
    <main>
      <SendEmotion insertText={insertText} />
      <SendImage sendFiles={sendFiles} />
      <SendFile sendFiles={sendFiles} />
      <SendMiniprogram />
      <SendVideonum />
      <PullInGroup />
      <Actionable strict>
        <Transfer />
      </Actionable>
    </main>
    <aside>
      {switchShowSidebar !== null ? (
        <ProfileOutlined
          styleName={c('sidebar', showingSidebar !== null ? 'enable' : '')}
          onClick={() => switchShowSidebar()}
        />
      ) : null}
    </aside>
  </div>
}

function SendImage(props: { sendFiles: (files: File[], autoStart?: boolean) => void }) {
  const { sendFiles } = props
  const fileRef = useRef<HTMLInputElement>(null)
  const chooseFile = useCallback(() => fileRef.current?.click(), [fileRef])
  const onChooseFile = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      sendFiles([...e.target.files!], true)
      if (fileRef.current) fileRef.current.value = ''
    },
    [sendFiles],
  )
  return <div>
    <Tooltip title="发送图片">
      <FileImageOutlined onClick={chooseFile} />
    </Tooltip>
    <input ref={fileRef} type="file" accept=".jpg,.jpeg,.png" multiple onChange={onChooseFile} />
  </div>
}

function SendFile(props: { sendFiles: (files: File[], autoStart?: boolean) => void }) {
  const { sendFiles } = props
  const fileRef = useRef<HTMLInputElement>(null)
  const chooseFile = useCallback(() => fileRef.current?.click(), [fileRef])
  const onChooseFile = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      sendFiles([...e.target.files!], true)
      if (fileRef.current) fileRef.current.value = ''
    },
    [sendFiles],
  )
  return <div>
    <Tooltip title="发送文件/视频">
      <FolderOpenOutlined onClick={chooseFile} />
    </Tooltip>
    <input ref={fileRef} type="file" multiple onChange={onChooseFile} />
  </div>
}

function SendMiniprogram() {
  const [choosing, setChoosing] = useState(false)
  const send = (mp: SavedMiniProgram) => void services.chat.send(ChatRecordType.MiniProgram, mp)
  return <div>
    <Tooltip title="发送小程序">
      <span className="anticon" styleName="miniprograms" onClick={() => setChoosing(true)}>
        <MpIcon />
      </span>
    </Tooltip>
    <ManageMiniprograms
      visible={choosing}
      onClose={() => setChoosing(false)}
      choose={{ text: '发送', action: send }}
    />
  </div>
}

function SendVideonum() {
  const [choosing, setChoosing] = useState(false)
  const send = (videonum: SavedVideonum) =>
    void services.chat.send(ChatRecordType.Videonum, videonum)
  return <div>
    <Tooltip title="发送视频号">
      <span className="anticon" styleName="videonums" onClick={() => setChoosing(true)}>
        <VideonumIcon />
      </span>
    </Tooltip>
    <ManageVideonums
      visible={choosing}
      onClose={() => setChoosing(false)}
      choose={{ text: '发送', action: send }}
    />
  </div>
}

// 发送语音功能会触发风控暂时禁用
// function SendAudio(props: {
//   sendFiles: (files: File[], autoStart?: boolean, recordType?: ChatRecordType) => void
// }) {
//   const { sendFiles } = props
//   const fileRef = useRef<HTMLInputElement>(null)
//   const chooseFile = useCallback(() => fileRef.current?.click(), [fileRef])
//   const onChooseFile = useCallback(
//     (e: React.ChangeEvent<HTMLInputElement>) => {
//       sendFiles([...e.target.files!], true, ChatRecordType.Audio)
//       if (fileRef.current) fileRef.current.value = ''
//     },
//     [sendFiles],
//   )
//   return <div>
//     <Tooltip title="发送语音">
//       <AudioOutlined onClick={chooseFile} />
//     </Tooltip>
//     <input ref={fileRef} type="file" accept=".aac,.mp3" multiple onChange={onChooseFile} />
//   </div>
// }
